<template>
  <div>
    <div class="pageheader">
      <XHeader :left-options="{backText:''}" :title="xheader.title" class="XHeader"></XHeader>
    </div>
    <div class="page">
      <div class="metop">
        <chimage class="avatar" :src="(userInfo.extra && userInfo.extra.avatarUrl) || require('@/assets/img/dfimg.jpg')"></chimage>
        <div class="info">
          <div class="name" v-if="userInfo.employee_name">{{userInfo.employee_name}}</div>
          <div class="name" v-if="userInfo.phone">手机号:{{userInfo.phone}}</div>
          <div class="name" v-if="this.isCQDX">剩余额度：<span>{{userInfo.quota_amount}}</span></div>
        </div>
        <img class="right" src="@/assets/img/right-2.png" @click="onPersonalInfo">
      </div>

      <div class="block">
        <div class="listitem" @click="onMall">
          <img class="icon" src="@/assets/img/ic_order.png">
          <div class="text">我的订单</div>
          <img class="right" src="@/assets/img/right.png">
        </div>
      </div>

      <div class="block">
        <div class="listitem" @click="onShopping">
          <img class="icon" src="@/assets/img/ic_shopping.png">
          <div class="text">我的购物车</div>
          <img class="right" src="@/assets/img/right.png">
        </div>
      </div>

      <div class="block">
        <div class="listitem" @click="onAddress">
          <img class="icon" src="@/assets/img/ic_address.png">
          <div class="text">地址管理</div>
          <img class="right" src="@/assets/img/right.png">
        </div>
      </div>

      <div class="block">
        <div class="listitem" @click="onBanlance">
          <img class="icon" src="@/assets/img/ic_coupons.png">
          <div class="text">额度管理</div>
          <img class="right" src="@/assets/img/right.png">
        </div>
      </div>

      <div class="block">
        <div class="listitem" @click="onQuotaPassword">
          <img class="icon" src="@/assets/img/updata_pasd.svg">
          <div class="text">额度密码</div>
          <img class="right" src="@/assets/img/right.png">
        </div>
      </div>

      <div class="block">
        <div class="listitem" @click="onPersonInfo">
          <img class="icon" style="width: 26px;height: 26px" src="@/assets/img/updata_pasd.svg">
          <div class="text">修改密码</div>
          <img class="right" src="@/assets/img/right.png">
        </div>
      </div>

      <div class="block">
        <div class="listitem" @click="onCoupon">
          <img class="icon" src="@/assets/img/ic_coupons.png">
          <div class="text">我的优惠券</div>
          <img class="right" src="@/assets/img/right.png">
        </div>
      </div>

      <div class="block">
        <div class="listitem" @click="onInvoice">
          <img class="icon" src="@/assets/img/ic_coupons.png">
          <div class="text">开票信息管理</div>
          <img class="right" src="@/assets/img/right.png">
        </div>
      </div>

      <div class="block" v-if="isSanXia">
        <div class="listitem" @click="onShowTel">
          <img class="icon" src="@/assets/img/ic_tel.png">
          <div class="text">客服热线</div>
          <img class="right" src="@/assets/img/right.png">
        </div>
      </div>

      <!--不是重庆电信与西部智谷才显示此按钮-->
      <div class="block" style="margin-top: 32px" v-if="!isXBZG">
        <button class="button" @click="logoutToken()">退出登录</button>
      </div>
    </div>

    <!--设置密码弹框-->
    <modify-quota-pass
      v-model="dialogVisibleQuotaPass"
      v-if="dialogVisibleQuotaPass"
      :isQuotaPass="quotaPass"
      :setQuotaPass="setQuotaPass"
      :phone="phone"
    ></modify-quota-pass>
  </div>
</template>

<script>
  // import { cookie } from 'vux'
  import { mapMutations } from 'vuex'
  import Me from '@/dll/me'
  import modifyQuotaPass from '../../components/modifyQuotaPass'

  export default {
    name: 'me',
    components: {
      modifyQuotaPass
    },
    data () {
      return {
        xheader: {
          title: '个人中心'
        },
        userInfo: {},

        quotaPass: undefined, // 是否设置了额度密码
        dialogVisibleQuotaPass: false, // 修改额度密码
        phone: ''
      }
    },
    created () {
      this.getPersonInfo()
    },
    methods: {
      ...mapMutations(['logout']),
      onMall () {
        this.$router.push({ name: 'mallOrder' })
      },
      onWelfare () {
        this.$router.push({ name: 'welfareOrder' })
      },
      onLive () {
        this.$router.push({ name: 'liveOrder' })
      },
      onShopping () {
        this.$router.push({ name: 'shopping' })
      },
      onAddress () {
        this.$router.push({ name: 'address' })
      },
      onCoupon () {
        this.$router.push({ name: 'meCoupon' })
      },
      onGeneralize () {
        this.$router.push({ name: 'meGeneralize' })
      },
      onInvoice () {
        this.$router.push({ name: 'meInvoice' })
      },
      onPersonInfo () {
        this.$router.push({ name: 'modifyPass' })
      },
      onBanlance () {
        this.$router.push({ name: 'balance' })
      },
      logoutToken () {
        this.logout()
        this.$router.replace({ name: 'mall' })
        window.location.reload()
      },
      // 个人中心
      onPersonalInfo () {
        this.$router.push({ name: 'personalInfo', query: { userInfo: JSON.stringify(this.userInfo) } })
      },
      // 额度密码
      onQuotaPassword () {
        if (this.phone) {
          this.dialogVisibleQuotaPass = true
        } else {
          let msg
          if (this.quotaPass) {
            msg = '当前用户未绑定手机号 暂时不能修改密码'
          } else {
            msg = '当前用户未绑定手机号 暂时不能设置密码'
          }
          this.$vux.alert.show({
            title: '提示',
            content: msg
          })
          this.dialogVisibleQuotaPass = false
        }
      },
      // 客服热线
      onShowTel () {
        this.$vux.alert.show({
          title: '客服热线',
          content: `<div style="text-align: left; font-size: 16px">
            <div style="margin: 12px 0">三峡e购: <a style="text-decoration: none" href="tel:028-85931635"> 028-85931635</a></div>
            <div style="margin: 12px 0">京 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;东: <a style="text-decoration: none" href="tel:4006069068"> 4006069068</a></div>
            <div style="margin: 12px 0">客服电话: <a style="text-decoration: none" href="tel:028-85931631"> 028-85931631</a></div>
            </div>`
        })
      },

      // 获取个人信息
      async getPersonInfo () {
        this.$vux.loading.show()
        let res = await Me.getPersonInfo()
        this.$vux.loading.hide()
        if (res.code == 0) {
          let { data } = res
          this.userInfo = data
          this.userInfo.employee_name = data.extra.employee_name
          this.phone = data.phone
          this.quotaPass = parseFloat(data.quota_pass)
        }
      },

      setQuotaPass () {
        this.quotaPass = 1
      }
    }
  }
</script>

<style lang="less" scoped>
  .metop {
    box-sizing: border-box;
    padding: 36px 32px 55px 32px;
    display: flex;
    align-items: center;
    flex-direction: row;
    height: 155px;
    background-image: linear-gradient(135deg, #f9f5f5, #ebdedb);
    margin-bottom: -25px;
  }

  .metop .avatar {
    height: 64px;
    width: 64px;
    border-radius: 32px;
    display: block;
    margin-right: 12px;
    background-color: #fff;
  }

  .metop .info {
    flex: 1;
  }

  .metop .info .name {
    font-size: 15px;
    color: #351009;
    line-height: 23px;

    span {
      font-size: 17px;
      color: #b0290f;
    }
  }

  .metop .info .num {
    margin-top: 14px;
    font-size: 14px;
    color: #351009;
    line-height: 20px;
  }

  .metop .right {
    margin-left: 12px;
    height: 20px;
    width: 20px;
    display: block;
  }

  .butbar {
    height: 50px;
    background-color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
  }

  .butbar .item {
    flex: 1;
    text-align: center;
    font-size: 15px;
    color: #9a694d;
    line-height: 21px;
    position: relative;
  }

  .butbar .item::before {
    content: "";
    display: block;
    height: 16px;
    background-color: #ede3e0;
    width: 1px;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .butbar .item:first-child::before {
    width: 0;
  }

  .listitem {
    display: flex;
    flex-direction: row;
    padding: 10px 20px 10px 16px;
    background-color: #fff;
    align-items: center;
  }

  .listitem .icon {
    width: 28px;
    height: 28px;
    display: block;
    margin-right: 8px;
  }

  .listitem .text {
    flex: 1;
    font-size: 15px;
    color: #351009;
    line-height: 21px;
  }

  .listitem .right {
    margin-left: 8px;
    height: 20px;
    width: 20px;
    display: block;
  }
</style>
